/**
 * @Description:登录主入口
 * @author 云离
 * @date: 2018/12/28
 */
import React, { Component } from 'react'
import {actions} from "../../../../reducers/main"
import { connect } from 'react-redux'
import {withRouter} from "react-router-dom"
import {message, Spin, Table, Switch, Button, Icon, Pagination, Modal, Tag} from 'antd'
import MyForm from '../../../components/Form'
import axios from '../../../../apis/api'
import qs from 'qs'
import GroupForm from './GroupForm'
const {confirm} = Modal


const mapStateToProps = (state, ownProps) => {
    return {
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
    }
}

const formItems = [{
    label: '分组名称',
    key: 'groupName',
    type: 'input'
}]

class AccountGroup extends Component {
    state = {
        initForm: {
            groupName: ''
        },
        formItmes: formItems,
        searchParam: {},
        loading: false,
        depMap: {},
        pageSize: 10,
        curPage: 1,
        tableData: {
            total: 0,
            rows: []
        },
        initGroupForm: {},
        visibleDlg: false,
        groupFormTitle: '添加账号分组',
        cardFormType: 'add',
        confirmLoading: false
    }

    handleSearch = (value) => {
        this.setState({
            curPage: 1,
            searchParam: value
        }, this.searchTable)
    }

    componentDidMount() {
        this.init()
    }
    init = async () => {
        try {
            this.searchTable()
        } catch (e) {
            this.setState({
                loading: false
            })
            message.error(e.message)
        }
    }

    searchTable = async () => {
        const {pageSize, curPage, searchParam} = this.state
        const query = {
            orderByColumn: '',
            isAsc: 'asc',
            pageSize,
            pageNum: curPage,
            groupName: searchParam.groupName,
        }
        try {
            this.setState({
                loading: true
            })
            const result = await axios.post('/channel/channelAccountGroup/list', qs.stringify(query))
            console.log(result)
            if (result.code === 0) {
                this.setState({
                    tableData: result,
                    loading: false
                })
            } else {
                this.setState({
                    loading: false
                })
                message.error(result.msg)
            }
        } catch (e) {
            this.setState({
                loading: false
            })
            message.error(e.message)
        }
    }
    //翻页
    handlePageChange = (page, pageSize) => {
        this.setState({
            curPage: page
        },this.searchTable)
    }

    delGroup = (data) => {
        Modal.confirm({
            title: '系统提示',
            content: '确定删除该条账号分组信息吗？',
            okText: '确定',
            cancelText: '取消',
            onOk: () => {
                this._delGroup({
                    ids: data.groupId
                })
            },
            onCancel() {
            },
        })
    }
    _delGroup = async (body) => {
        try {
            const result = await axios.post('/channel/channelAccountGroup/remove', qs.stringify(body))
            if (result.code === 0) {
                message.success(result.msg)
            } else {
                message.error(result.msg)
            }
            this.handlePageChange(1)
        } catch (e) {
            message.error(e.message || e.msg)
        }
    }
    addGroup = () => {
        this.setState({
            visibleDlg: true,
            initGroupForm: {},
        })
    }

    submitGroupForm = async (data) => {
        try {
            this.setState({
                confirmLoading: true
            })
            const result = await axios.post('/channel/channelAccountGroup/add', qs.stringify(data))
            if (result.code === 0) {
                message.success(result.msg)
                this.cancelGroupForm()
                this.handlePageChange(1)
            } else {
                message.error(result.msg)
            }
            this.setState({
                confirmLoading: false
            })
        } catch (e) {
            console.log(e)
            message.error(e.message || e.msg)
            this.setState({
                confirmLoading: false
            })
        }
    }

    cancelGroupForm = () => {
        this.setState({
            confirmLoading: false,
            visibleDlg: false
        })
    }

    onShowSizeChange = (current, pageSize) => {
        this.setState({
            pageSize: pageSize,
            curPage: current,
        }, this.searchTable)
    }

    render() {
        const {initForm, formItmes, loading, tableData, curPage, pageSize, payTypesMap, orderStatusMap} = this.state
        const columns = [{
            title: '码商代理id',
            dataIndex: 'channelId',
            key: 'channelId'
        }, {
            title: '分组名称',
            dataIndex: 'groupName',
            key: 'groupName'
        },{
            title: '操作',
            dataIndex: 'actions',
            key: 'actions',
            render: (value, data) => {
                return <Button size={"small"} type="danger" onClick={() => this.delGroup(data)}>删除</Button>
            }
        },]
        return (
            <div>
                <MyForm initForm={initForm} items={formItmes} handleSearch={this.handleSearch}/>
                <Spin spinning={loading}>
                    <div style={{marginBottom: 10}}>
                        <Button type="primary" onClick={() => this.addGroup()}>添加</Button>
                    </div>
                    <Table dataSource={tableData.rows} columns={columns} pagination={false} scroll={{x: true}}/>
                    <Pagination
                        style={{marginTop: 10, marginBottom: 20}}
                        total={tableData.total}
                        showTotal={total => `共 ${total} 项`}
                        pageSizeOptions={['10', '20', '50', '100', '500']}
                        showSizeChanger
                        onShowSizeChange={this.onShowSizeChange}
                        pageSize={pageSize}
                        current={curPage}
                        onChange={this.handlePageChange}
                    />
                </Spin>
                <GroupForm confirmLoading={this.state.confirmLoading} visible={this.state.visibleDlg} initForm={this.state.initGroupForm} title={this.state.groupFormTitle} okCb={this.submitGroupForm} cancelCb={this.cancelGroupForm} />
            </div>
        )
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(AccountGroup))
